<template>
	<view
		class="rounded-xxxl border text-hide text-center"
		:class="[typeClass, sizeClass, icon ? 'inline-flex flex-row items-center' : 'inline-block', extraClass || '']"
		:style="['min-width:70rpx',extraStyle || '']"
		@click.stop="$emit('touch')"
		hover-class="opacity-80"
		hover-start-time="0"
		hover-stay-time="50"
	>
		<text v-if="icon" class='iconfont mr-1 text-m' :class="[icon]"></text>
		<text><slot>{{text}}</slot></text>
	</view>
</template>

<script>
import { ref, watch, computed } from 'vue';
export default {
	props: {
		type: {
			default: 'default',
			type: String,
		},
		size: {
			default: 'normal',
			type: String,
		},
		extraClass: String,
		extraStyle: String,
		pdClass: String,
		text: String,
		icon: String,
	},
	setup(props, ctx) {
		const typeClass = ref('');
		watch(
			() => props.type,
			(v) => {
				switch (v) {
					case 'default':
						typeClass.value = 'b-color-4 color-secondary';
						break;
					case 'default-light':
						typeClass.value = 'b-color-4 color-disable';
						break;
					case 'primary':
						typeClass.value = 'b-active color-white bg-primary';
						break;
					case 'primary-ghost':
						typeClass.value = 'b-active color-primary';
						break;
					case 'primary-light':
						typeClass.value = 'b-active color-primary bg-primary-op05';
						break;
				}
			},
			{ immediate: true }
		);
		const sizeClass = computed(() => {
			const pdClass = props.pdClass;
			switch (props.size) {
				case 'small':
					return (pdClass || 'py-1 px-1-1') + ' text-xn';
			}
			return (pdClass || 'py-1 px-3-1') + ' text-m';
		});
		return {
			typeClass,
			sizeClass,
		};
	},
};
</script>

<style></style>
